<template>
  <div class="box">
    <div class="title">
      论文审核
    </div>
    <div class="option">
      <div class="option_item" :class="{ selected: select_option === 0 }" @click="select_main(0)">
        <div class="option_item_select" v-show="select_option===0"></div>
        <div class="option_item_label">概览</div>
      </div>
      <div class="option_item" :class="{ selected: select_option === 1 }" @click="select_main(1)">
        <div class="option_item_select" v-show="select_option===1"></div>
        <div class="option_item_label">在线测试</div>
      </div>
      <div class="option_item" :class="{ selected: select_option === 2 }" @click="select_main(2)">
        <div class="option_item_select" v-show="select_option===2"></div>
        <div class="option_item_label">应用</div>
      </div>
    </div>
  </div>
</template>

<script>
import {bus} from "@/paper_review/js/bus";

export default {
  data() {
    return {
      select_option: 0,
    }
  },
  methods: {
    select_main(i) {
      this.select_option = i;
      bus.emit("selectMain", i);
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 10vw;
  height: 90vh;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2), /* 上边框阴影 */
  0 -4px 4px -2px rgba(0, 0, 0, 0.2), /* 下边框阴影 */
  4px 0 4px -2px rgba(0, 0, 0, 0.2), /* 左边框阴影 */
  -4px 0 4px -2px rgba(0, 0, 0, 0.2); /* 右边框阴影 */
  margin: 0 1vw 1vh 1vw;
  padding: 0 0 0 0;
  border-radius: 10px;

  .title {
    height: 7vh;
    padding: 2vh 2vw 2vh 2vw;
    font-weight: bolder;
    text-align: center;
  }

  .option {
    width: 100%;

    .option_item {
      display: flex;
      color: gray;
      height: 5vh;
      background-color: white;

      .option_item_select {
        flex: 3;
        background-color: #2468f2;
      }

      .option_item_label {
        flex: 97;
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: left; /* 水平居中 */
        padding-left: 1.97vw;
      }
    }

    .option_item:hover {
      color: #2a68f2;
      background-color: #f2f8ff;
    }

    .option_item.selected {
      color: #2a68f2;
      background-color: #f2f8ff;
    }
  }
}

//获取焦点阴影变深
.box:hover {
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.4), /* 上边框阴影 */
  0 -4px 4px -2px rgba(0, 0, 0, 0.4), /* 下边框阴影 */
  4px 0 4px -2px rgba(0, 0, 0, 0.4), /* 左边框阴影 */
  -4px 0 4px -2px rgba(0, 0, 0, 0.4); /* 右边框阴影 */
}

</style>